<template>
  <div class="takeaway">
    <!--外卖模块-->
    <b-sidebar id="sidebar-1" right shadow>
      <div class="header-address">
        <a href="javascript:;">
          <img class="location-img" :src="require('@/assets/images/LifePageImages/LifeTakeawayImages/location.png')">
          <span class="address">北京师范大学珠海分校</span>
          <img class="down-arrow" :src="require('@/assets/images/LifePageImages/LifeTakeawayImages/down-arrow.png')">
        </a>
      </div>
      <div class="header-search">
        <a class="search">
          <i class="weui-icon-search"></i>
          <span>搜索商家、商品名称</span>
        </a>
      </div>
      <div class="header-ad-img">
        <img class="add" :src="require('@/assets/images/LifePageImages/LifeTakeawayImages/header-ad.jpg')">
      </div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <ul class="swiper-slide">
            <li
              v-for="(item, index) in lifeTakeawayListItemArr"
              :key="index">
              <a href="javascript:;">
                <img class="swiper-img" :src="item.images">
                <p class="swiper-text">{{ item.title }}</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="header-ad">
        <div>
          <h3>品质套餐</h3>
          <p class="ad-text">搭配齐全吃得好</p>
          <p class="buy">立即抢购></p>
        </div>
        <img class="right-ad-img" :src="require('@/assets/images/LifePageImages/LifeTakeawayImages/img12.png')">
      </div>
      <div id="list">
        <section class="section-li">
          <img style="width: 5.1rem; height: 5.1rem; margin-right: 10px" :src="require('@/assets/images/LifePageImages/LifeTakeawayImages/img13.png')">
          <div style="flex: 1;">
            <div>
              <div class="dis-flex">
                <h4 class="section-title">
                  <span>鲜丰水果(海华店)</span>
                </h4>
              </div>
              <div class="dis-flex evaluate">
                <div style="display: flex; flex: 1; font-size:small">
                  <img class="stars" :src="require('@/assets/images/LifePageImages/LifeTakeawayImages/img14.svg')">
                  <span>4.6</span>
                  <span>--月销87</span>
                </div>
                <span class="special">蜂鸟专送</span>
              </div>
              <div class="evaluate dis-flex">
                <div>
                  <span class="border-style">￥20起送</span>
                  <span>配送费￥3</span>
                </div>
                <div class="color999">
                  <span class="border-style">659m</span>
                  <span>26分钟</span>
                </div>
              </div>
            </div>
            <div>
              <div style="text-align:left">
                <img class="shop-img" :src="require('@/assets/images/LifePageImages/LifeTakeawayImages/kb.png')">
                <span class="good-shop">口碑人气好店</span>
              </div>
              <div class="dis-flex evaluate">
                <ul>
                  <li>
                    <span class="first-word bg112">首</span>
                    <span>新用户下单立减17元</span>
                  </li>
                  <li>
                    <span class="first-word bg240">减</span>
                    <span>满15减3</span>
                  </li>
                </ul>
                <div class="color999">
                  <span>6个活动</span>
                  <img class="arrow-img" :src="require('@/assets/images/LifePageImages/LifeTakeawayImages/down-arrow.png')">
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </b-sidebar>
  </div>
</template>

<script>
import { lifeTakeawayListItemArr } from './index'

export default {
  name: 'LifeTakeaway',
  data () {
    return {
      lifeTakeawayListItemArr
    }
  }
}
</script>

<style scoped>
  .takeaway {
    text-align: center;
  }
  .header-address a {
    display: block;
    padding: 20px 25px 0;
    font-size: 1.2rem;
    font-weight: 400;
    color: #fff;
    background-image: linear-gradient(90deg,#0af,#0085ff);
  }
  .location-img {
    width: 1.8rem;
    height: 1.58rem;
    margin-bottom: 4px;
    vertical-align: initial;
  }
  .address {
    display: inline-block;
    width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .down-arrow {
    width: 1.1rem;
    height: 1.1rem;
    vertical-align: text-top;
  }
  .header-search {
    padding: .1rem 30px .4rem;
    background-image: linear-gradient(90deg,#0af,#0085ff);
  }
  .search {
    display: block;
    width: 100%;
    height: 2.8rem;
    margin: 0 auto;
    font-size: 1rem;
    color: #999;
    line-height: 2.8rem;
    text-align: center;
    letter-spacing: 2px;
    border-radius: 3px;
    background: #fff;
  }
  .weui-icon-search {
    font-size: 1.2rem;
  }
  .header-ad-img {
    width: 100%;
    height: 9rem;
  }
  .add {
    width: 100%;
    height: 100%;

  }
  .b-sidebar {
    width: auto !important;
  }
  .swiper-container {
    width: 100%;
    margin: 0 auto;
  }
  .swiper-slide {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
    font-size: 18px;
    text-align: center;
    list-style-type: none;
    padding: 0;
  }
  .swiper-slide li {
     width: 20%;
     margin-bottom: 15px;
   }
  .swiper-img {
    width: 3.8rem;
    height: 3.8rem;
  }
  .swiper-text {
    font-size: 0.5rem;
    color: #666;
  }
  .swiper-container-horizontal > .swiper-pagination-bullets {
     bottom: 0;
  }
  .header-ad {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 5px 5px;
    background: linear-gradient(0deg,#f4f4f4 5%,#fafafa 95%);
  }
  .header-ad h3 {
    font-size: 1.5rem;
    color: #333;
    line-height: 1.5rem;
  }
  .ad-text {
    font-size: 1.1rem;
    color: #777;
    margin-bottom: .2rem;
  }
  .buy {
    font-size: 1.1rem;
    color:#af8260;
  }
  .right-ad-img {
    width: 11rem;
  }
  .section-li {
    display: flex;
    padding: 15px 0 10px;
    border-bottom: 1px solid #FBFBFB;
  }
  .section-title {
    width: 65%;
    margin-top: -3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.2rem;
  }
  .support-list li {
    padding: 0 .2rem;
    font-size: .8rem;
    color: #999;
    border: 1px solid #ddd;
    border-radius: 3px;
    list-style-type: none;
  }
  .evaluate {
    margin-top: 10px;
    font-size: .87rem;
    color: #666;
  }
  .evaluate ul {
    padding: 0;
  }
  .evaluate ul li {
    text-align: left;
  }
  .stars {
    width: 70px;
    height: 15px;
    margin-right: 12px;
    align-self: center;
  }
  .special {
    height: 20px;
    padding: 0 .3rem;
    font-size: .8rem;
    color: #fff;
    line-height: 19px;
    border-radius: 6px;
    background: linear-gradient(45deg,#0085ff,#0af);
  }
  .border-style {
    margin-right: 5px;
    padding-right: 5px;
    border-right: 2px solid #ddd;
  }
  .shop-img {
    width: .8rem;
    height: .8rem;
    vertical-align: middle;
  }
  .good-shop {
    display: inline-block;
    margin: .5rem 0;
    font-size: .75rem;
    color: rgb(232, 71, 11);
  }
  .first-word {
    display: inline-block;
    padding: 0 3px;
    margin: 0 5px 5px 0;
    color: #fff;
    border-radius: 4px;
  }
  .arrow-img {
    width: .5rem;
    height: .35rem;
    margin-left: 5px;
    vertical-align: middle;
  }
  ul {
    list-style-type: none;
  }
  .color999 {
    color: #999;
  }
  .bg112 {
    background-color: rgb(112, 188, 70);
  }
  .bg240 {
    background-color: rgb(240, 115, 115);
  }
  .bg241 {
    background-color: rgb(241, 136, 79);
  }
  .dis-flex {
    display: flex;
    justify-content: space-between;
    align-content: center;
  }
</style>
